<template>
    <div class="params">
        <Crumbs :bread='bread'></Crumbs>
        <!-- 提示框 -->
        <el-card>
            <el-alert :closable="false" type="warning" effect="dark" title="注意：只允许为第三方分类设置相关参数">
            </el-alert>
            <el-dialog title="添加参数" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
                <el-form ref="form" :model="form1" label-width="180px">
                    <el-form-item label="动态参数" prop="attr_name" :rules='[{required:true,message:"请输入动态参数",trigger:"blur"}]'>
                        <el-input v-model="form1.attr_name"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dongadd">确 定</el-button>
                  </span>
            </el-dialog>
            <el-dialog title="修改参数" :visible.sync="dialogVisible1" width="60%" :before-close="handleClose">
                <el-form ref="formedit" :model="formedit" label-width="180px">
                    <el-form-item label="动态参数" prop="attr_name" :rules='[{required:true,message:"请输入动态参数",trigger:"blur"}]'>
                        <el-input v-model="formedit.attr_name"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="edit">确 定</el-button>
                  </span>
            </el-dialog>
            <el-dialog title="添加属性" :visible.sync="dialogVisible2" width="60%" :before-close="handleClose">
                <el-form ref="form2" :model="form2" label-width="180px">
                    <el-form-item label="属性名称" prop="attr_name" :rules='[{required:true,message:"请输入属性名称",trigger:"blur"}]'>
                        <el-input v-model="form2.attr_name"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="jingadd">确 定</el-button>
                  </span>
            </el-dialog>
            <el-dialog title="修改属性" :visible.sync="dialogVisible3" width="60%" :before-close="handleClose">
                <el-form ref="formedit" :model="formedit" label-width="180px">
                    <el-form-item label="属性名称" prop="attr_name" :rules='[{required:true,message:"请输入属性名称",trigger:"blur"}]'>
                        <el-input v-model="formedit.attr_name"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible3 = false">取 消</el-button>
                    <el-button type="primary" @click="edit1">确 定</el-button>
                  </span>
            </el-dialog>
            <!-- 下拉选框 -->
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="选择商品分类" :label-width="formLabelWidth">
                    <el-cascader v-model="form.cat_id" :options="optins" :props="{label:'cat_name',value:'cat_id', expandTrigger: 'hover' }" clearable @change="handleChange"></el-cascader>
                </el-form-item>
            </el-form>
            <!-- 表格切换 -->
            <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                <el-tab-pane label="动态参数" name="many" style="margin-bottom:20px;">
                    <el-button type="primary" size='mini' :disabled="form.cat_id==''" style="margin-bottom:20px;" @click="dialogVisible=true">添加参数</el-button>
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="scope">
                                       <el-tag
                              :key="i"
                              v-for="(item, i) in scope.row.attr_vals"
                              closable
                              :disable-transitions="false"
                              @close="handleClose(i,scope.row)"
                            >
                              {{ item }}
                            </el-tag>
            <el-input
              class="input-new-tag"
               v-if="scope.row.inputVisible"
                          v-model="scope.row.inputValue"
                          ref="saveTagInput"
                          size="small"
                          @keyup.13.native="handleInputConfirm(scope.row)"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small"  @click="showInput(scope.row)">+ New Tag</el-button>
</template>
                        </el-table-column>
                        <el-table-column label="#" type='index'>
                        </el-table-column>
                        <el-table-column prop="attr_name" label="参数名称">
                        </el-table-column>
                        <el-table-column label="操作">
<template slot-scope="scope">
    <el-button type="primary" icon="el-icon-edit" size="mini" @click="deit(scope.row.attr_id)">
    </el-button>
    <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.attr_id)"></el-button>
</template>
    </el-table-column>
    //表格展示
  </el-table>
    </el-tab-pane>
    <el-tab-pane label="静态属性" name="only">
        <el-button type="primary" size='mini' style="margin-bottom:20px;" :disabled="form.cat_id==''" @click="dialogVisible2=true">添加属性</el-button>
          <el-table
    :data="tableData"
    border
    style="width: 100%">
      <el-table-column type="expand">
<template slot-scope="scope">
    <div v-if="scope.row.attr_vals.length>0" style="display:inline-block">
        <el-tag :key="i" v-for="(item, i) in scope.row.attr_vals" closable :disable-transitions="false" @close="handleClose(i, scope.row)">
            {{ item }}
        </el-tag>
    </div>
    <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
    </el-input>
    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
</template>
                        </el-table-column>
    <el-table-column
      label="#"
      type='index'
      >
    </el-table-column>
    <el-table-column
      prop="attr_name"
      label="属性名称"
      >
    </el-table-column>
      <el-table-column label="操作">
<template slot-scope="scope">
    <el-button type="primary" icon="el-icon-edit" size="mini" @click="deit1(scope.row.cat_id)">
    </el-button>
    <el-button type="danger" icon="el-icon-delete" size="mini" @click="del1(scope.row.cat_id)"></el-button>
</template>
    </el-table-column>
  </el-table>
    </el-tab-pane>
  </el-tabs>
        </el-card>
    </div>
</template>
<script>
    import Crumbs from "@/components/crumbs.vue";
    import {
        catelist
    } from '../until/categories.js'
    import {
        paramslist,
        delparams,
        addparams,
        huiparams,
        editparams,
        chadel
    } from '../until/params.js'
    export default {
        components: {
            Crumbs
        },
        data() {
            return {
                dynamicTags: [],
                inputVisible: false,
                dialogVisible: false,
                dialogVisible1: false,
                dialogVisible2: false,
                dialogVisible3: false,
                inputValue: '',
                form: {
                    cat_id: "",
                },
                value: "",
                attrid: null,
                cate: false,
                optins: [],
                formedit: {
                    attr_name: ""
                },
                form1: {
                    attr_name: ""
                },
                form2: {
                    attr_name: ""
                },
                page: {
                    type: "",
                    pagenum: 1,
                    pagesize: 5
                },
                activeName: 'many',
                tableData: [],
                tableData1: [],
                arr: [],
                formLabelWidth: '120px',
                bread: [{
                        id: 1,
                        path: "",
                        title: "商品管理"
                    },
                    {
                        id: 2,
                        path: "",
                        title: "商品参数"
                    }
                ]
            };
        },
        mounted() {
            this.xiasetlist();
        },
        methods: {
            //回填
            async deit(id) {
                this.dialogVisible1 = true;
                const {
                    data: res
                } = await huiparams(this.arr[2], id)
                this.formedit.attr_name = res.data.attr_name
                this.attrid = res.data.attr_id
            },
            // 修改
            async edit() {
                var obj = {
                    attr_name: this.formedit.attr_name,
                    attr_sel: this.activeName
                }
                const {
                    data: res
                } = await editparams(this.arr[2], this.attrid, obj)
                this.handleClick()
                this.dialogVisible1 = false;
                this.$message.success(res.meta.msg)
            },
            deit1() {},
            del1() {},
            edit1() {},
            async jingadd() {
                var obj = {
                    attr_name: this.form2.attr_name,
                    attr_sel: this.activeName
                }
                const {
                    data: res
                } = await addparams(this.arr[2], obj)
                this.dialogVisible2 = false;
                this.$message.success(res.meta.msg)
                this.handleClick()
            },
            // 卡片切换
            async handleClick() {
                const {
                    data: res
                } = await paramslist(this.arr[2], this.activeName);
                res.data.forEach((item) => {
                    item.inputVisible = false
                    item.inputValue = ''
                    if (item.attr_vals === "") {
                        item.attr_vals = [];
                    } else {
                        item.attr_vals = item.attr_vals.split(" ");
                    }
                });
                this.tableData = res.data;
                console.log(res);
            },
            // 下拉框数据获取
            async xiasetlist() {
                const {
                    data: res
                } = await catelist(this.page)
                this.optins = res.data.result
            },
            // 下拉框数据选择
            async handleChange(value) {
                this.arr = value;
                console.log(this.activeName)
                if (this.arr.length == 3) {
                    var {
                        data: res
                    } = await paramslist(this.arr[2], this.activeName)
                    res.data.forEach((item) => {
                        item.inputVisible = false
                        item.inputValue = ''
                        if (item.attr_vals === "") {
                            item.attr_vals = [];
                        } else {
                            item.attr_vals = item.attr_vals.split(" ");
                            this.dynamicTags = item.attr_vals
                        }
                    });
                    this.tableData = res.data;
                }
            },
            async dongadd() {
                var obj = {
                    attr_name: this.form1.attr_name,
                    attr_sel: this.activeName
                }
                const {
                    data: res
                } = await addparams(this.arr[2], obj)
                this.dialogVisible = false;
                this.$message.success(res.meta.msg)
                this.handleClick()
            },
            async handleClose(row, i) {
                row.attr_vals.split(i, 1);
                var ac = row.attr_vals.join(" ");
                console.log(i, row);
                var obj={attr_name:row.attr_name,attr_sel:this.activeName,attr_vals:ac.join(" ")}
                const {data:res} = await chadel(
                    this.arr[2],
                    row.attr_id,
                );
                console.log(res);
            },
            showInput(row) {
                row.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
        async  handleInputConfirm(row) {
                var ac = row.attr_vals;
      // console.log(row);
      let inputValue = row.inputValue;
      console.log(inputValue);
      row.inputVisible = false;
      if (row.inputValue == "") return;
      ac.push(row.inputValue);
      row.inputValue=''
      var obj={attr_name:row.attr_name,attr_sel:this.activeName,attr_vals:ac.join(" ")}
      const {data:res} = await chadel(
        this.arr[2],
        row.attr_id,
        obj
      );
      console.log(res);
            },
            del(id) {
                this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    .then(async() => {
                        var res = await delparams(this.arr[2], id);
                        console.log(res);
                        this.handleClick();
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            },
            deit1() {},
            del1() {},
        },
    };
</script>

<style scoped>
    .el-form {
        margin: 20px 0;
    }
    .el-tag+.el-tag {
        margin-left: 10px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>